﻿<!DOCTYPE html>
<html>
<head>
<!--
  Copyright (c) 2019 Jean-Marc VIGLINO, 
  released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
  <title>ol-ext: print dialog</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<meta name="description" content="Print control for Openlayers" />
	<meta name="keywords" content="openlayers, control, print, canvas" />

  <link rel="stylesheet" href="../style.css" />

  <!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

  <!-- Openlayers -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css" />
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>

  <!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>
  <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
  <script src="https://unpkg.com/elm-pep"></script>

  <!-- https://github.com/MrRio/jsPDF -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
  <!-- filesaver-js -->
  <script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/aa9f4e0e/FileSaver.min.js"></script>

  <style>
    #image {
      background-color: #eee;
      padding: 1em;
      clear: both;
      display: inline-block;
      margin: 1em 0;
    }
    #map {
      width:100%; 
      height:calc(100vh - 10em);
    }
    .info {
      margin: 0;
    }
    .ol-attribution {
      bottom: 0;
      height: 1em;
    }
    .ol-scale-line {
      right: 0;
      left: auto;
      bottom: 2em;
    }
    .ol-control-title {
      height: 2em;
    }
    .ol-print-compass {
      top: 1.5em!important;
    }
    .ol-ext-print-dialog label {
      letter-spacing: -.05em;
    }
  </style>
</head>
<body >
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

  <a href="../../index.html">
    <h1>ol-ext: print dialog</h1>
  </a>
  <div class="info">
    The <b>ol/control/PrintDialog</b> is dialog to format the map for printing or exporting.
    <br/>
    This example use display the dialog in french (only 
    '<a href="./map.control.printdialog.html">en</a>'
    and 
    '<a href="./map.control.printdialog.fr.html">fr</a>'
    are implemented yet).
    Create <a href="https://github.com/Viglino/ol-ext/issues/new">an issue</a> to ask for a new language or make a pull request...
    <br/>
    Use <a href="https://github.com/eligrey/FileSaver.js/">eligrey/FileSaver</a> 
    or <a href="https://github.com/MrRio/jsPDF">MrRio/jsPDF</a>
    to save resulting image.
  </div>

  <!-- Map div -->
  <div id="map"></div>

  <script type="text/javascript">

    // The map
    var map = new ol.Map({
      target: 'map',
      view: new ol.View ({
        zoom: 5,
        center: [266812, 5960201]
      }),
      controls: ol.control.defaults.defaults({ "attribution": false }),
      layers: [
        new ol.layer.Geoportail({ layer: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2' }),
        new ol.layer.Geoportail({layer: 'ORTHOIMAGERY.ORTHOPHOTOS', visible: false }),
        new ol.layer.Geoportail({layer: 'GEOGRAPHICALNAMES.NAMES', visible: false }),
      ]
    });
    map.addControl(new ol.control.LayerSwitcher());
    map.addControl(new ol.control.CanvasAttribution({ canvas: true }));
    map.addControl(new ol.control.CanvasTitle({ 
      title: '', 
      visible: false,
      style: new ol.style.Style({ text: new ol.style.Text({ font: '20px "Lucida Grande",Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif'}) })
    }));


    // Legend
    var legend = new ol.legend.Legend({ 
      title: 'Legend', 
      margin: 5,
      items: [{
        title: 'Church', 
        typeGeom: 'Point', 
        style: new ol.style.Style({ 
          image: new ol.style.Icon({ 
          src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Eglise_icone_2.svg/30px-Eglise_icone_2.svg.png',
          crossOrigin: 'anonymous' // Enable print
        })})
      }, { 
        title: 'Photo', 
        typeGeom: 'Point', 
        style: new ol.style.Style({ 
          image: new ol.style.Icon({ 
          src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Icone_appareil_photo.svg/30px-Icone_appareil_photo.svg.png',
          crossOrigin: 'anonymous' // Enable print
        })})
      }, {
        title: 'Line', typeGeom: 'LineString', style: ol.style.Style.defaultStyle() 
      }, {
        title: 'Polygon', typeGeom: 'Polygon', style: ol.style.Style.defaultStyle() 
      }]
    });

    ol.control.PrintDialog.prototype.formats = [{
      title: 'Copier dans le presse-papier',
      imageType: 'image/png',
      clipboard: true
    }, {
      title: 'Enregistrer en jpeg (qualité supérieure)',
      imageType: 'image/jpeg',
      quality: .8
    }, {
      title: 'Enregistrer en jpeg (qualité maximale)',
      imageType: 'image/jpeg',
      quality: 1
    }, {
      title: 'Enregistrer en png',
      imageType: 'image/png',
      quality: .92
    }, {
      title: 'Enregistrer en pdf',
      imageType: 'image/jpeg',
      quality: .92,
      pdf: true
    }
  ];
  // Control
  var legendCtrl = new ol.control.Legend({ legend: legend });
  map.addControl(legendCtrl);

  // ScaleLine
  map.addControl(new ol.control.CanvasScaleLine());

  // Print control
  var printControl = new ol.control.PrintDialog({ lang: 'fr' });
  printControl.setSize('A4');
  map.addControl(printControl);

  /* On print > save image file */
  printControl.on(['print', 'error'], function(e) {
    // Print success
    if (e.image) {
      if (e.pdf) {
        // Export pdf using the print info
        var pdf = new jsPDF({
          orientation: e.print.orientation,
          unit: e.print.unit,
          format: e.print.size
        });
        pdf.addImage(e.image, 'JPEG', e.print.position[0], e.print.position[0], e.print.imageWidth, e.print.imageHeight);
        pdf.save(e.print.legend ? 'legend.pdf' : 'map.pdf');
      } else  {
        // Save image as file
        e.canvas.toBlob(function(blob) {
          var name = (e.print.legend ? 'legend.' : 'map.')+e.imageType.replace('image/','');
          saveAs(blob, name);
        }, e.imageType, e.quality);
      }
    } else {
      console.warn('No canvas to export');
    }
  });

</script>

</body>
</html>